<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>品质从此无忧-麦丰网</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" href="/app/styles/base.css">
		<link rel="stylesheet" href="/common/css/slider/slider.css">
		<link rel="stylesheet" href="/common/css/slider/slider.default.css">
		<link rel="stylesheet" href="/common/css/zmu.css">
		<link rel="stylesheet" href="/app/styles/leader.css">

		<script type="text/javascript" src="/common/js/zepto.js"></script>
		<script type="text/javascript" src="/common/js/zmu.js"></script>
		<script type="text/javascript" src="/common/js/slider/slider.js"></script>
		<script type="text/javascript" src="/common/js/slider/dots.js"></script>
		<script type="text/javascript" src="/common/js/slider/$touch.js"></script>
		<script type="text/javascript" src="/common/js/slider/$autoplay.js"></script>
		<script type="text/javascript" src="/common/js/slider/$lazyloadimg.js"></script>
		<script type="text/javascript" src="/app/scripts/common_lib.js"></script>
		
<style type="text/css">
.div-header {
	width: 100%;
	height: 45px;
	color: #FFF;
	margin: 0 auto;
	line-height: 45px;
	text-align: left;
	background: url(images/red_bg.jpg) repeat;
}

#name{ 
	font-size:18px; 
	line-height:45px; 
	padding-left:0px; 
	margin-left:0px;
	width:200px; 
	height:45px; 
	float:left;
	padding-left: 10px;
	overflow: hidden;
	text-overflow:ellipsis; 
	white-space:nowrap;
}

ul,li{list-style:none; padding: 0;margin: 0;}

.div-content {
	width: 100%;
	max-width: 330px;
	margin: 0 auto;
}

.div-section {
	background-color: #FFF;
	text-align: left;
	padding: 8px;
	margin-top: 8px;
	border: #dcdada solid 1px;background-color:#FFF; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
}
.bitButton1{ margin-top:0px;border:0;width:100%; height:40px; font-size:18px; font-weight:bold; background:url(images/button_bg3.jpg) repeat; color:#FFFFFF; line-height:36px; text-align:center;vertical-align:middle;
border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}

.p-introduce{
	font-size: 14px;
	/*color: #31859b;*/
	color: #282828;
	margin-top: 8px;
	margin-bottom: 8px;
	line-height: 18px;
}

.p-introduce span {
	color: #00f;
}

.img-introduce {
	max-width: 100%;
}

</style>		
</head>

<body>
	<div class="div-header">
		<ul>
			<li id="name"></li>
			<li id="user" onclick="location.href='/'"></li>
		</ul>
	</div>
	
	<div class = "div-content">
		<form id="form-product">
			<input type="hidden" id = "id" name="id" value = "0"/>
		</form>
		<div class="div-section">
			<!--  
			商品介绍 <font style="color:#0000FF"><b>焦龙</b></font> 向您推荐：
			-->
			<div id="div-introduce">
			</div>
		
		</div>
		<div class="div-section" style="margin-bottom: 8px;">
			<table width="100%" border="0" cellspacing="0" cellpadding="0" id="buybutton" name="buybutton">
			  <tr>
			    <td width="50%" style="padding: 5px;"><input id="btn-wantBuy" type="button" class="bitButton1" value="我想购买" /></td>
			    <td width="50%" style="padding: 5px;"><input type="button" class="bitButton1" onclick="location.href='/'" value="再逛逛" /></td>
			  </tr>
			</table>
		</div>
		
	</div>
	
	<footer>
		<div class="footerWrap">
			<iframe src="/mobile/footer.html" style="padding: 0;margin: 0;width: 100%;height: 100%;" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
		</div>
	</footer>
	<div style="height: 50px;"></div>
	
	<div class="bottom">
		<div class="bottomWrap">
			<iframe src="/mobile/bottom.html" style="padding: 0;margin: 0;width: 100%;height: 100%;" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
		</div>
	</div>
</body>
	
<script type="text/javascript">
	$(document).ready(function() {
		cjl.getTitle();
		var id = cjl.requestData("product_id");
		$("#id").val(id);
		
		$("#btn-wantBuy").click(function() {
			window.location.href="product.html?product_id="+id;
		});
		
		getProductDetail();
	});
	
	function getProductDetail() {
		var url = "/product/introduce";
		var params = $("#form-product").serialize();
		cjl.get(url, params, function(body) {
			var product = body.product;
			var introduceList = body.introduceList;
			$("#name").text(product.brand);
			$("#div-introduce").empty();
			$("#div-introduce").append('<p class="p-introduce"><span>'+product.name +'</span>&nbsp;'+ product.description+'</p>');
			for(var o in introduceList) {
				var introduce = introduceList[o];
				html = '';
				if(introduce.plain) {
					html += '<p class="p-introduce">';
					html += introduce.content;
					html += '</p>';
				} else {
					html += '<div><img class="img-introduce" src="'+introduce.content+'" />';
					html += '</p></div>';
				}
				$("#div-introduce").append(html);
			}
		});
	}

</script>
</html>
